<template>
	<!-- 我是实时路况 -->
	<div id="container">
		<!-- 下拉菜单 -->
		<el-dropdown
			:class="isChosen == true ? 'chosen' : ''"
			trigger="click"
			@command="handleCommand"
		>
			<span class="el-dropdown-link title">
				实时路况
				<i class="el-icon-arrow-down el-icon--right"></i>
			</span>
			<el-dropdown-menu slot="dropdown">
				<el-dropdown-item command="on">
					<img src="img/交通信号灯.png" alt="" />
					显示路况
				</el-dropdown-item>

				<el-dropdown-item command="off">
					<img src="img/关闭_操作_jurassic.png" alt="" />
					关闭路况
				</el-dropdown-item>
			</el-dropdown-menu>
		</el-dropdown>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { Query } from '../../../utils/Query.js';
var drawLayer;
export default {
	name: 'Video',
	data() {
		return {
			isChosen: false, //是否激活显示实时路况菜单
			service: {
				docName: 'guanggu',
				layerId: 1,
			},
			// isshowRoad: false, // 是否高亮显示路况的查询结果
		};
	},
	computed: mapState(['isShowRoads']),
	methods: {
		handleCommand(command) {
			if (command == 'on') {
				this.queryRoad();
				this.isChosen = true; //激活查询菜单
			} else {
				this.isChosen = false; //关闭查询菜单
				this.$store.commit('changeisShowRoads', this.isChosen);
			}
		},
		/* 查询实时路况 */
		queryRoad() {
			Query.queryLines({
				service: this.service,
				callback: this.querySuccess,
			});
		},
		// 查询成功的回调，将查询的结果发送给store
		querySuccess(result) {
			//初始化Zondy.Format.PolygonJSON类
			var format = new Zondy.Format.PolygonJSON();
			//将MapGIS要素JSON反序列化为ol.Feature类型数组
			var features = format.read(result);
			let a = '车流量';
			let flows = [];
			let flow1 = features.filter((item) => item.values_['values_'][a] <= 1000);
			let flow2 = features.filter(
				(item) =>
					1000 < item.values_['values_'][a] &&
					item.values_['values_'][a] <= 1500
			);
			let flow3 = features.filter((item) => 1500 < item.values_['values_'][a]);
			flows.push(flow1, flow2, flow3);
			let colors = [
				'#08d808', //畅通
				'#b95c19', //行驶缓慢
				'#ce1919', // 拥堵
			];

			let drawLayers = [];
			for (let i = 0; i < 3; i++) {
				let drawSource = new ol.source.Vector({
					wrapX: false,
				});
				drawSource.addFeatures(flows[i]);
				drawLayer = new ol.layer.Vector({
					source: drawSource,
					title: '高亮显示',
					style: new ol.style.Style({
						//边线样式
						stroke: new ol.style.Stroke({
							color: colors[i],
							width: 8,
						}),
					}),
				});

				drawLayers.push(drawLayer);
			}
			this.$store.commit('drawRoad', drawLayers);
			this.$store.commit('changeisShowRoads', this.isChosen);
			// 调用函数绘制图例
			this.drawMapTuliMethod();
		},
		//绘制图例函数
		//百度到的参考代码  https://www.lmlphp.com/user/57956/article/item/654187/
		drawMapTuliMethod() {
			// 图例数据颜色
			var dataObj = [
				{
					tname: '拥堵',
					color: '#ce1919',
				},
				{
					tname: '行驶缓慢',
					color: '#b95c19',
				},
				{
					tname: '畅通',
					color: '#08d808',
				},
			];

			//根据图例经纬度坐标绘制canvas
			var removeData = {
				tx: 114.441,
				ty: 30.492,
			};
			var canvas = document.createElement('canvas');
			var shape = new ol.Feature({
				geometry: new ol.geom.Point([removeData.tx, removeData.ty]),
			});

			var ctx = canvas.getContext('2d');
			var yheight = 30;
			yheight += dataObj.length * 27; //计算canvas高度
			canvas.width = 100;
			canvas.height = yheight;

			/*设置图例样式*/
			ctx.fillStyle = '#fff';
			ctx.fillRect(0, 0, 200, yheight); //绘制底图
			ctx.font = '16px Arial';
			ctx.fillStyle = 'blue';
			ctx.fillText('路况图例', canvas.width / 5, 25);
			for (var i = 0; i < dataObj.length; i++) {
				//实现文字前面带色块
				ctx.fillStyle = dataObj[i].color; //块颜色
				ctx.fillRect(10, 60 + (i - 1) * 25, 15, 15); //颜色块：x,y,w,h

				ctx.font = '12px Arial';
				ctx.fillStyle = '#555';
				ctx.fillText(dataObj[i].tname, 30, 72 + (i - 1) * 25); //文字
			}
			//将canvas添加到样式中
			var style = new ol.style.Style({
				image: new ol.style.Icon({
					img: canvas,
					imgSize: [canvas.width, canvas.height],
				}),
			});
			// 设置样式
			shape.setStyle(style);
			// 添加到图层
			drawLayer.getSource().addFeature(shape);
		},
	},
};
</script>

<style scoped>
.chosen {
	/* 激活菜单显示的样式 */
	background-color: antiquewhite !important;
	color: darkcyan !important;
}
.el-dropdown {
	z-index: 11;
	padding: 0 5px;
	border-radius: 10px;
	border-bottom: 2px solid white;
	background-color: rgba(248, 248, 132, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
}
.title {
	font-size: 18px;
}
.el-dropdown:hover {
	cursor: pointer;
	font-weight: 900;
	background-color: antiquewhite;
	color: darkcyan;
	box-shadow: 1px 1px 0px 0px;
	transition: all 0.2s ease-in-out;
}
</style>
